// 导入路由组件 Link，导航其他页面
import { Link, useNavigate, useParams } from "react-router";
const Article = () => {
  // 创建命令式导航函数
  const navigate = useNavigate();

  // 接收useParams自定义路由参数
  const params = useParams();
  console.log("name=", params.name);

  return (
    <>
      {/* 声明导航 */}
      <Link to={"/login"}>我是Link路由，去登录页面</Link>

      {/* 页面SearchParams传参 */}
      <button onClick={() => navigate("/login?id=10086")}>
        SearchParams页面自由变量传参
      </button>
      {/* 区别：useParams只能接收路由配置中添加的参数，而SearchParams可以接收任意变量传参 */}
    </>
  );
};

export default Article;
